<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>星座默契测试 - 星格</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#6C5CE7',
                        secondary: '#FD79A8',
                        accent: '#00B894',
                        dark: '#2D3436',
                        light: '#F8F9FA'
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style>
        .bg-stars { background-image: radial-gradient(#ffffff 1px, transparent 1px); background-size: 24px 24px; }
    </style>
    <script>
        const ZODIACS = [
            { id:'aries', name:'白羊座' },
            { id:'taurus', name:'金牛座' },
            { id:'gemini', name:'双子座' },
            { id:'cancer', name:'巨蟹座' },
            { id:'leo', name:'狮子座' },
            { id:'virgo', name:'处女座' },
            { id:'libra', name:'天秤座' },
            { id:'scorpio', name:'天蝎座' },
            { id:'sagittarius', name:'射手座' },
            { id:'capricorn', name:'摩羯座' },
            { id:'aquarius', name:'水瓶座' },
            { id:'pisces', name:'双鱼座' },
        ];

        const COMP_BASE = {
            // 粗略的配对基础分（0-10），用以微调最终分数
            aries:       { leo:8, sagittarius:8, gemini:7, aquarius:7, libra:6, virgo:5 },
            taurus:      { virgo:8, capricorn:8, cancer:7, pisces:7, scorpio:6, gemini:5 },
            gemini:      { libra:8, aquarius:8, aries:7, leo:7, virgo:5, taurus:5 },
            cancer:      { scorpio:8, pisces:8, taurus:7, virgo:7, aries:5, gemini:5 },
            leo:         { aries:8, sagittarius:8, gemini:7, libra:7, capricorn:5, pisces:5 },
            virgo:       { taurus:8, capricorn:8, cancer:7, scorpio:7, aries:5, leo:5 },
            libra:       { gemini:8, aquarius:8, leo:7, sagittarius:7, cancer:5, capricorn:5 },
            scorpio:     { cancer:8, pisces:8, capricorn:7, virgo:7, gemini:5, leo:5 },
            sagittarius: { aries:8, leo:8, aquarius:7, libra:7, taurus:5, cancer:5 },
            capricorn:   { taurus:8, virgo:8, scorpio:7, pisces:7, leo:5, libra:5 },
            aquarius:    { gemini:8, libra:8, aries:7, sagittarius:7, taurus:5, cancer:5 },
            pisces:      { cancer:8, scorpio:8, taurus:7, capricorn:7, aries:5, libra:5 },
        };

        function buildQuestions(userZ, partnerZ) {
            const userName = ZODIACS.find(z=>z.id===userZ)?.name || '';
            const partnerName = ZODIACS.find(z=>z.id===partnerZ)?.name || '';
            return [
                {
                    title: `当你们吵架时，按${userName}（你）和${partnerName}（对方）的特质，谁更可能先主动和好？`,
                    options: ['A. 我（'+userName+'）','B. 对方（'+partnerName+'）','C. 一起主动'], key: 'reconcile'
                },
                {
                    title: `周末计划出游，${userName}更想“说走就走”，${partnerName}更想“提前规划”，你们更可能的共识是？`,
                    options: ['A. 提前简单列清单','B. 完全即兴出发','C. 各退一步，半天规划半天即兴'], key: 'trip'
                },
                {
                    title: `遇到分歧时，你们更倾向的沟通方式是？`,
                    options: ['A. 先冷静后讨论','B. 当下就说开','C. 写下来再交流'], key: 'comm'
                },
                {
                    title: `对待金钱与消费的态度，你们更接近哪一类？`,
                    options: ['A. 一个务实一个随性','B. 都务实','C. 都随性'], key: 'money'
                },
                {
                    title: `给彼此安排惊喜这件事，你们更可能？`,
                    options: ['A. 轮流来','B. 更看重日常小体贴','C. 重要日子认真准备'], key: 'surprise'
                },
            ];
        }

        function scoreAnswers(answers, userZ, partnerZ) {
            let score = 0;
            // 倾向于合作/折中选项得分更高
            const map = { A: 7, B: 6, C: 9 };
            answers.forEach(a => { score += map[a] || 0; });
            // 基于星座搭配的微调（0-10）
            const base = (COMP_BASE[userZ]?.[partnerZ] || COMP_BASE[partnerZ]?.[userZ] || 6);
            score += base;
            // 归一化到 0-100（最大 9*5 + 10 ≈ 55），映射到 100
            const percent = Math.round(Math.min(100, (score / 55) * 100));
            return percent;
        }

        function buildAdvice(userZ, partnerZ) {
            const name = id => (ZODIACS.find(z=>z.id===id)?.name || '');
            const u = name(userZ), p = name(partnerZ);
            return {
                strengths: `${u}与${p}都重视彼此感受，能够相互支持。`,
                tips: `${u}多倾听${p}的想法，${p}多包容${u}的即兴，会更默契。`
            };
        }
    </script>
</head>
<body class="bg-gray-50 text-dark min-h-screen flex flex-col">
    <header class="bg-white/80 backdrop-blur border-b border-gray-100 sticky top-0 z-20">
        <div class="container mx-auto px-4 py-3 flex items-center">
            <button onclick="history.back()" class="w-9 h-9 rounded-lg bg-gray-100 flex items-center justify-center mr-3"><i class="fa fa-angle-left"></i></button>
            <h1 class="text-base font-semibold">星座默契测试</h1>
        </div>
    </header>

    <main class="flex-1">
        <div class="fixed inset-0 -z-10 bg-gradient-to-br from-pink-50 via-purple-50 to-blue-50"></div>
        <div class="container mx-auto px-4 py-5">
            <div id="step-select" class="bg-white/80 backdrop-blur rounded-2xl border border-purple-100 p-5 shadow-sm">
                <h2 class="text-base font-semibold text-gray-800 mb-3">选择双方星座</h2>
                <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
                    <div>
                        <label class="text-xs text-gray-500">你的星座</label>
                        <select id="user-zodiac" class="mt-1 w-full bg-white border border-gray-200 rounded-xl px-3 py-2 text-sm">
                        </select>
                    </div>
                    <div>
                        <label class="text-xs text-gray-500">对方星座（好友/恋人/家人）</label>
                        <select id="partner-zodiac" class="mt-1 w-full bg-white border border-gray-200 rounded-xl px-3 py-2 text-sm">
                        </select>
                    </div>
                </div>
                <button id="start-test" class="mt-4 w-full bg-gradient-to-r from-primary to-secondary text-white rounded-xl py-2.5 text-sm">开始测试</button>
            </div>

            <div id="step-quiz" class="hidden bg-white/80 backdrop-blur rounded-2xl border border-purple-100 p-5 shadow-sm">
                <div class="flex items-center justify-between mb-2">
                    <h2 class="text-base font-semibold text-gray-800">双人默契测试</h2>
                    <div id="progress" class="text-xs text-gray-500"></div>
                </div>
                <div id="question-box" class="mt-2"></div>
            </div>

            <div id="step-report" class="hidden bg-white/80 backdrop-blur rounded-2xl border border-purple-100 p-5 shadow-sm">
                <div class="flex items-center mb-4">
                    <div class="w-10 h-10 rounded-full bg-gradient-to-br from-amber-100 to-orange-100 flex items-center justify-center mr-3"><i class="fa fa-heart text-amber-600"></i></div>
                    <h2 class="text-base font-semibold text-gray-800">星座默契报告</h2>
                </div>
                <div class="bg-white rounded-xl border border-amber-100 p-4 mb-3">
                    <div class="text-sm text-gray-700">你们的默契度</div>
                    <div id="score" class="text-3xl font-bold mt-1 bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">--%</div>
                </div>
                <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
                    <div class="bg-white rounded-xl border border-emerald-100 p-4">
                        <div class="text-sm font-medium text-emerald-700 mb-1"><i class="fa fa-leaf mr-2"></i>契合点</div>
                        <div id="strengths" class="text-xs text-gray-700"></div>
                    </div>
                    <div class="bg-white rounded-xl border border-rose-100 p-4">
                        <div class="text-sm font-medium text-rose-700 mb-1"><i class="fa fa-lightbulb-o mr-2"></i>小分歧建议</div>
                        <div id="tips" class="text-xs text-gray-700"></div>
                    </div>
                </div>
                <div class="mt-4 flex gap-2">
                    <button id="restart" class="flex-1 bg-gray-100 text-gray-700 rounded-xl py-2 text-sm">重新测试</button>
                    <button id="share" class="flex-1 bg-gradient-to-r from-primary to-secondary text-white rounded-xl py-2 text-sm">分享给TA</button>
                </div>
            </div>
        </div>
    </main>

    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const selUser = document.getElementById('user-zodiac');
            const selPartner = document.getElementById('partner-zodiac');
            const fill = (select) => {
                select.innerHTML = ZODIACS.map(z => `<option value="${z.id}">${z.name}</option>`).join('');
            };
            fill(selUser); fill(selPartner);

            const stepSelect = document.getElementById('step-select');
            const stepQuiz = document.getElementById('step-quiz');
            const stepReport = document.getElementById('step-report');
            const startBtn = document.getElementById('start-test');
            const qBox = document.getElementById('question-box');
            const progress = document.getElementById('progress');
            const scoreEl = document.getElementById('score');
            const strengthsEl = document.getElementById('strengths');
            const tipsEl = document.getElementById('tips');
            const restartBtn = document.getElementById('restart');
            const shareBtn = document.getElementById('share');

            let questions = [];
            let idx = 0;
            let answers = [];
            let userZ = 'aries', partnerZ = 'taurus';

            function show(el){ el.classList.remove('hidden'); }
            function hide(el){ el.classList.add('hidden'); }

            function renderQuestion() {
                const q = questions[idx];
                progress.textContent = `第 ${idx+1} / ${questions.length} 题`;
                qBox.innerHTML = `
                    <div class="bg-gradient-to-br from-white to-purple-50/30 border border-purple-100 rounded-xl p-4">
                        <div class="text-sm font-medium text-gray-800">${q.title}</div>
                        <div class="mt-3 grid grid-cols-1 gap-2">
                            ${q.options.map((opt, i) => `
                                <button data-ans="${['A','B','C'][i]}" class="ans-btn text-left bg-white rounded-lg border border-gray-200 px-3 py-2 text-sm hover:border-primary hover:bg-primary/5 transition">
                                    ${opt}
                                </button>
                            `).join('')}
                        </div>
                    </div>
                `;
                qBox.querySelectorAll('.ans-btn').forEach(btn => {
                    btn.addEventListener('click', () => {
                        answers.push(btn.getAttribute('data-ans'));
                        if (idx < questions.length - 1) {
                            idx += 1; renderQuestion();
                        } else {
                            const percent = scoreAnswers(answers, userZ, partnerZ);
                            const { strengths, tips } = buildAdvice(userZ, partnerZ);
                            scoreEl.textContent = `${percent}%`;
                            strengthsEl.textContent = strengths;
                            tipsEl.textContent = tips;
                            hide(stepQuiz); show(stepReport);
                        }
                    });
                });
            }

            startBtn.addEventListener('click', () => {
                userZ = selUser.value; partnerZ = selPartner.value;
                questions = buildQuestions(userZ, partnerZ);
                idx = 0; answers = [];
                hide(stepSelect); hide(stepReport); show(stepQuiz);
                renderQuestion();
            });

            restartBtn.addEventListener('click', () => {
                show(stepSelect); hide(stepQuiz); hide(stepReport);
            });

            shareBtn.addEventListener('click', async () => {
                const text = `邀请你做「星座默契测试」：${location.href}`;
                try {
                    if (navigator.share) {
                        await navigator.share({ title: '星座默契测试', text, url: location.href });
                    } else {
                        await navigator.clipboard.writeText(text);
                        shareBtn.textContent = '链接已复制';
                        setTimeout(()=> shareBtn.textContent = '分享给TA', 1200);
                    }
                } catch (e) {}
            });
        });
    </script>
</body>
</html>


